<template>
	<div>
		<div class="flex items-center">
			<div v-for="(item, index) in tabs" :key="index"
				class="mr-20px border-1px border-#ffffff  box-border w-14px h-14px flex items-center justify-center" :class="{ 'border-solid': selectedTabs == item.value }
					" @click="selectedTabs = item.value">
				<img :src="item.icon" alt="" class="w-100% h-100% cursor-pointer">
			</div>
		</div>
		<div class="mt-10px text-12px">
			<div class="flex items-center justify-between
			text-#B5B5B5 mb-10px">
				<p>价格(USDT)</p>
				<p>数量(BTC)</p>
			</div>
			<div v-if="selectedTabs == 'red-green'"
			class="h-600px overflow-hidden">
				<div class="h-42% overflow-hidden">
					<div v-for="(item, index) in 100" :key="index" class="flex items-center justify-between mb-2px relative
					z-10">
						<p class="text-#F34E5F z-10">
							70000.0
						</p>
						<p class="z-10 mr-10px pt-2px pb-2px">
							0.20832
						</p>
						<p class="absolute bg-#2D181E right-0 h-full z-1 w-60%"></p>
					</div>
				</div>
				<div class="text-#F34E5F text-20px mt-20px mb-20px">
					97525.7
				</div>
				<div class="h-42% overflow-hidden">
					<div v-for="(item, index) in 100" :key="index" class="flex items-center justify-between mb-2px relative
					z-10">
						<p class="text-#07B175 z-10">
							70000.0
						</p>
						<p class="z-10 mr-10px pt-2px pb-2px">
							0.20832
						</p>
						<p class="absolute bg-#09251B right-0 h-full z-1 w-60%"></p>
					</div>
				</div>
			</div>
			<div v-if="selectedTabs == 'red'"
			class="h-600px overflow-hidden">
				<div class="h-84% overflow-hidden">
					<div v-for="(item, index) in 100" :key="index" class="flex items-center justify-between mb-2px relative
					z-10">
						<p class="text-#F34E5F z-10">
							70000.0
						</p>
						<p class="z-10 mr-10px pt-2px pb-2px">
							0.20832
						</p>
						<p class="absolute bg-#2D181E right-0 h-full z-1 w-60%"></p>
					</div>
				</div>
				<div class="text-#F34E5F text-20px mt-20px mb-20px">
					97525.7
				</div>
			</div>
			<div v-if="selectedTabs == 'green'"
			class="h-600px overflow-hidden">
				<div class="h-84% overflow-hidden">
					<div v-for="(item, index) in 100" :key="index" class="flex items-center justify-between mb-2px relative
					z-10">
						<p class="text-#07B175 z-10">
							70000.0
						</p>
						<p class="z-10 mr-10px pt-2px pb-2px">
							0.20832
						</p>
						<p class="absolute bg-#09251B right-0 h-full z-1 w-60%"></p>
					</div>
				</div>
				<div class="text-#07B175 text-20px mt-20px mb-20px">
					97525.7
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
const tabs = ref<any[]>(
	[
		{
			value: 'red-green',
			icon: '/transaction/spot/bar-red-green.svg'
		},
		{
			value: 'red',
			icon: '/transaction/spot/bar-red.svg'
		},
		{
			value: 'green',
			icon: '/transaction/spot/bar-green.svg'
		}
	]
)

const selectedTabs = ref<any>('red-green')


</script>
